<template>
	<div class="technology">
		<imgSectionTitle :title="contentList[0]?.channelName"></imgSectionTitle>

		<div class="imgContent">
			<div class="img_content_left">
				<div class="technology_box_left_bottom">
					<div v-for="item in [contentList[0], contentList[1]]">
						<a class="block_a" :href="Path + item?.url" target="_blank">
							<div class="technology_img_box_left_bottom img_box"><img class="technology_img_left_bottom img_pic" :src="getImgPath(item?.headImag || '')" /></div>
							<p class="technology_img_left_bottom_p p_descripte">{{ item?.title }}</p>
						</a>
					</div>
				</div>
			</div>
			<div class="img_content_right">
				<a class="block_a " :href="Path + contentList[2]?.url" target="_blank">
					<div class="technology_img_right_top_contanier technology_box_right">
						<div class="technology_img_right_top_p_box">
							<p class="technology_img_right_top_p p_descripte1">{{ contentList[2]?.title }}</p>
						</div>
						<div class="technology_img_box_right_top img_box"><img class="technology_img_right_top img_pic" :src="getImgPath(contentList[2]?.headImag || '')" /></div>
					</div>
				</a>
				<div class="technology_box_right_bottom ">
					<a class="block_a technology_box_right" :href="Path + contentList[3]?.url" target="_blank">
						<div class="technology_img_right_top_contanier">
							<div class="technology_img_box_right_top img_box"><img class="technology_img_right_top img_pic" :src="getImgPath(contentList[3]?.headImag || '')" /></div>
							<div class="technology_img_right_bottom_p_box">
								<p class="technology_img_right_bottom_p p_descripte1">{{ contentList[3]?.title }}</p>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
//import imgSectionTitle from './imgSectionTitle.vue';
export default {
	props: {
		contentList: {
			type: Array,
			default: []
		}
	},
	components: {
		imgSectionTitle: defineAsyncComponent(() => import(rootPath + '/src/components/imgChannel/imgSectionTitle.vue'))
	},
	data() {
		return {
			Path: getRootPath(),
		};
	},
	methods: {
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style>
.technology {
	width: 1200px;
}
.technology .imgContent {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.technology .imgContent .img_content_left {
	width: 780px;
	display: flex;
	flex-direction: column;
}
.technology .imgContent .img_content_left .technology_box_left_bottom {
	display: flex;
	justify-content: space-between;
}
.technology .imgContent .img_content_left .technology_box_left_bottom .technology_img_box_left_bottom {
	width: 400px;
	height: 400px;
}
.technology .imgContent .img_content_left .technology_box_left_bottom .technology_img_left_bottom:hover{
	transform: scale(1.1);
}
.technology .imgContent .img_content_left .technology_img_left_bottom {
	height: 100%;
}
.technology .imgContent .img_content_left .technology_img_left_bottom_P {
	padding: 24px;
	font-size: 18px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 26px;
	width: 400px;
	box-sizing: border-box;
	margin-top: -76px;
	position: relative;
	width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
	z-index: 1;
	height: 76px;
	background: linear-gradient(360deg, #111111 0%, rgba(17,17,17,0) 100%);
}

.technology .imgContent .img_content_right {
	width: 400px;
	display: flex;
	flex-direction: column;
}

.technology .imgContent .img_content_right .technology_img_right_top_contanier {
	display: flex;
}
.technology .imgContent .img_content_right .technology_img_right_top_contanier .technology_img_right_top_p_box {
	padding: 64px 24px;
	font-size: 16px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 24px;
	box-sizing: border-box;
	background: #333333;
	width: 200px;
	height: 200px;
	position: relative;
}
.technology .imgContent .img_content_right .technology_img_right_top_contanier .technology_img_right_top_p_box:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	top: 88px;
	left: 200px;
	border-top: solid 15px transparent;
	border-left: solid 15px #333;
	border-bottom: solid 15px transparent;
	z-index: 1;
}
.technology .imgContent .img_content_right .technology_img_right_top_contanier .technology_img_right_top_p_box .technology_img_right_top_p {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
}
.technology .imgContent .img_content_right .technology_img_right_top_contanier .technology_img_box_right_top {
	width: 200px;
	height: 200px;
}
.technology .imgContent .img_content_right .technology_img_box_right_bottom {
	width: 400px;
	height: 200px;
}

.technology .imgContent .img_content_right .technology_img_right_bottom_p_box {
	padding: 64px 24px;
	font-size: 16px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 24px;
	box-sizing: border-box;
	background: #333333;
	width: 200px;
	height: 200px;
	position: relative;
}
.technology .imgContent .img_content_right .technology_img_right_bottom_p_box:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	top: 88px;
	left: -15px;
	border-top: solid 15px transparent;
	border-right: solid 15px #333;
	border-bottom: solid 15px transparent;
	z-index: 1;
}
.technology .imgContent .img_content_right .technology_img_right_bottom_p_box .technology_img_right_bottom_p {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
}
.technology_box_right:hover .technology_img_right_top:hover{
	transform: scale(1.1);
}
.technology_box_right:hover .p_descripte1{
	text-decoration: underline;
}
</style>
